<template>
  <div class="Register">
    <el-row  type="flex" justify="center">
        <el-col class="RegisterOuterBox" :span="7">
          <el-row type="flex" align="middle">
            <el-col :span="5">
                <div class="RegisterName">
                    <span>用户名</span>
                </div>
            </el-col>
              <el-col :span="17">
                  <div class="inputBox">
                      <el-input v-model="form.username" placeholder="例：黄乐乐"></el-input>
                  </div>
              </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="5">
                <div class="RegisterEmail">
                    <span>邮箱</span>
                </div>
            </el-col>
            <el-col :span="17">
                <div class="inputBox">
                    <el-input v-model="form.email" placeholder="example@gmail.com"></el-input>
                </div>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="5">
                <div class="RegisterEmail">
                    <span>密码</span>
                </div>
            </el-col>
            <el-col :span="17">
                <div class="inputBox">
                    <el-input v-model="form.password1" placeholder="密码需包含字母、数字及符号" show-password></el-input>
                </div>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="5">
                <div class="RegisterEmail">
                    <span>重复密码</span>
                </div>
            </el-col>
            <el-col :span="17">
                <div class="inputBox">
                    <el-input v-model="form.password2" placeholder="请重新输入密码" show-password></el-input>
                </div>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="5">
                <div class="RegisterEmail">
                    <span>密保问题</span>
                </div>
            </el-col>
            <el-col :span="17">
                <div class="inputBox">
                    <el-select v-model="form.squestion" placeholder="请选择一个密保问题">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </div>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="5">
                <div class="RegisterEmail">
                    <span>密保答案</span>
                </div>
            </el-col>
            <el-col :span="17">
                <div class="inputBox">
                    <el-input v-model="form.sanswer" placeholder="请输入密保答案"></el-input>
                </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="RegisterButton">
                <el-button type="primary" @click="submitRegister">注册</el-button>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="Return">
                <el-button type="text" icon="el-icon-back" @click="toLogin">返回登录</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: "RegisterPage",
    components: {
    // Header,
    },
    data() {
        return {
          form: {
            username:'',
            email:'',
            password1:'',
            password2:'',
            squestion:'',
            sanswer:'',
          },
          options: [{
            value: '1',
            label: '您最喜欢的颜色？'
          }, {
            value: '2',
            label: '您最讨厌的食物？'
          }, {
            value: '3',
            label: '您最要好的闺蜜/兄弟？'
          }, {
            value: '4',
            label: '您的爱好？'
          }, {
            value: '5',
            label: '您的初恋？'
          }],
        }
    },
    methods: {
      toLogin() {
        this.$router.push("/login");
      },
      submitRegister() {
        if (this.form.username === "" || this.form.email === "" || this.form.password1 === "" || this.form.password2 === "" || this.form.squestion === "" || this.form.sanswer === "") {
          this.$message.warning("请填写所有空格");
          return;
        }

        const formData = new FormData();
        formData.append("username", this.form.username);
        formData.append("email", this.form.email);
        formData.append("password", this.form.password1);
        formData.append("password2", this.form.password2);
        formData.append("securityQuestion", this.form.squestion);
        formData.append("securityAnswer", this.form.sanswer);


        this.$axios({
          method: "post",
          url: "/api/register",
          data: formData,
        })

        .then((res) => {
            console.log(res);
            if(res.data.errno === 100000) {
              this.$message.success("注册成功");
                setTimeout(() => {
                    this.$router.push("/login");
                }, 500);
            }
            else {
              this.$message.warning(res.data.msg);
            }
        })
        .catch((err) => {
            console.log(err);
        })
      },
    } 
}
</script>

<style scoped>
.Register{
  height: 100vh;
    width: 100%;
    background-color: #efefef;
}
.RegisterOuterBox {
    margin-top: 90px;
    border-radius: 20px;
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 10px 5px #d4d4d4;
    padding-top: 20px;
    padding-left: 10px;
    padding-bottom: 10px;
    /* text-align: center; */
    /* border: 1px solid black; */
}
.RegisterName, .RegisterEmail {
  margin-top: 20px;
  padding-right: 10px;
  float: right;
  /* border: 1px solid black; */
}
.inputBox {
  margin-top: 20px;
}
.inputBox /deep/ .el-input__inner{
  height: 50px;
}
.inputBox /deep/ .el-input__inner:focus{
  border-color: rgb(70, 70, 207);
}
.RegisterButton {
  margin-top: 35px;
  text-align: center;
  /* border: solid black 1px; */
}
.el-button--primary {
    background-color: rgb(145, 162, 255);
    border: none;
    height: 50px;
    width: 200px;
    font-size: 20px;
    font-weight: bold;
}
.el-button--primary:hover {
    background-color: rgb(160, 174, 255);
}
.el-button--text {
    color: rgb(109, 109, 109);
}
.el-button--text:hover {
    color: rgb(113, 113, 113);
    text-decoration: underline;
}
.Return {
  /* border: 1px solid black; */
  margin-top: 5px;
  margin-right: 10px;
  float: right;
}
</style>